<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>jQuery Dropdown CheckList</title>
    <!-- Use a JQuery ThemeRoller theme, in this case 'smoothness' -->
    <link rel="stylesheet" type="text/css" href="smoothness-1.8.13/jquery-ui-1.8.13.custom.css">
    <link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.themeroller.css">
    <style>
table td { vertical-align: top }
dd { padding-bottom: 15px }
    </style>

    <!-- Include the basic JQuery support (core and ui) -->
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="../src/ui.dropdownchecklist.js"></script>

    <!-- Apply dropdown check list to the selected items  -->
    <script type="text/javascript">
        $(document).ready(function() {
        	$returnS5 = $('#returnS5');
			$("#s5").dropdownchecklist({
onItemClick: function(checkbox, selector){
	var justChecked = checkbox.prop("checked");
	var checkCount = (justChecked) ? 1 : -1;
	for( i = 0; i < selector.options.length; i++ ){
		if ( selector.options[i].selected ) checkCount += 1;
	}
      if ( checkCount > 3 ) {
		alert( "Limit is 3" );
		throw "too many";
	}
}
});

        	$returnS6 = $('#returnS6');
			$("#s6").dropdownchecklist({
				onItemClick: function(checkbox, selector){
					var thisIndex = checkbox.attr("id").split('-')[2].replace('i', '');
					selector.options[thisIndex].selected = checkbox.attr("checked");

					var values = "";
					var newText = 'Checkbox ID = '+checkbox.attr('id')+'<br/><br/>';
					for( i=0; i < selector.options.length; i++ ){
						newText += 'Option i = ' +i+ ' || value = ' +selector.options[i].value+ ' || checked = ' +selector.options[i].selected+ '<br/><br/>';
						if (selector.options[i].selected && (selector.options[i].value != "")){
							if ( values != "" )
								values += ";";
							values += selector.options[i].value;
						}
					}
					newText += 'Selector Value = '+values;
					$returnS6.html( newText );
				}
			});

			$('select option').removeProp('selected');
			//for jquery < 1.6
			//$('select option').removeAttr('selected');
       });
    </script>
</head>
<body>
<div id="content">
    <h2>This example shows that the original select isn't automatically updated on the event onItemClick</h2>
    <table>
      <tr>
      	<td>
	        <select multiple="multiple" style="height: 100px;">
	            <option>Coffee Chip</option>
	            <option>Cookie Dough</option>
	            <option>Cookies 'n Cream</option>
	            <option>Dutch Chocolate</option>
	            <option>Fudgee Peanut Butter Cup</option>
	        </select>
	    </td>
      	<td>
	        <select id="s5" multiple="multiple">
	            <option>Coffee Chip</option>
	            <option>Cookie Dough</option>
	            <option>Cookies 'n Cream</option>
	            <option>Dutch Chocolate</option>
	            <option>Fudgee Peanut Butter Cup</option>
	        </select>
	    </td>
      	<td id="returnS5">
	    </td>
	  </tr>
	  <tr>
      	<td colspan='3'>
      		<h3>Code for this dropdown</h3>
      		<pre>
$returnS5 = $('#returnS5');
$("#s5").dropdownchecklist({
	onItemClick: function(checkbox, selector){
		var values = "";
		var newText = 'Checkbox ID = '+checkbox.attr('id')+'&lt;br/>&lt;br/>';
		for( i = 0; i < selector.options.length; i++ ){
			newText += 'Option i = ' +i+ ' || value = ' +selector.options[i].value+ ' || checked = ' +selector.options[i].selected+ '&lt;br/>&lt;br/>';
			if (selector.options[i].selected && (selector.options[i].value != "")){
				if ( values != "" )
					values += ";";
				values += selector.options[i].value;
			}
		}
		newText += 'Selector Value = '+values;
		$returnS5.html( newText );
	}
});
     		</pre>
	    </td>
	  </tr>
    </table>

    <h2>This modified code updates the original select on the event onItemClick</h2>
    <table>
      <tr>
      	<td>
	        <select multiple="multiple" style="height: 100px;">
	            <option>Coffee Chip</option>
	            <option>Cookie Dough</option>
	            <option>Cookies 'n Cream</option>
	            <option>Dutch Chocolate</option>
	            <option>Fudgee Peanut Butter Cup</option>
	        </select>
	    </td>
      	<td>
	        <select id="s6" multiple="multiple">
	            <option>Coffee Chip</option>
	            <option>Cookie Dough</option>
	            <option>Cookies 'n Cream</option>
	            <option>Dutch Chocolate</option>
	            <option>Fudgee Peanut Butter Cup</option>
	        </select>
	    </td>
      	<td id="returnS6">
	    </td>
	  </tr>
	  <tr>
      	<td colspan='3'>
      		<h3>Code for this dropdown</h3>
      		<pre>
$returnS6 = $('#returnS6');
$("#s6").dropdownchecklist({
	onItemClick: function(checkbox, selector){
		var thisIndex = checkbox.attr("id").split('-')[2].replace('i', '');
		selector.options[thisIndex].selected = checkbox.attr("checked");

		var values = "";
		var newText = 'Checkbox ID = '+checkbox.attr('id')+'&lt;br/>&lt;br/>';
		for( i=0; i < selector.options.length; i++ ){
			newText += 'Option i = ' +i+ ' || value = ' +selector.options[i].value+ ' || checked = ' +selector.options[i].selected+ '&lt;br/>&lt;br/>';
			if (selector.options[i].selected && (selector.options[i].value != "")){
				if ( values != "" )
					values += ";";
				values += selector.options[i].value;
			}
		}
		newText += 'Selector Value = '+values;
		$returnS6.html( newText );
	}
});
     		</pre>
	    </td>
	  </tr>
    </table>

</div>
</body>
</html>
